import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import "./uicontrol" as MyControls

RowLayout {
    Layout.fillWidth: true
    Layout.fillHeight: true
    //    Rectangle {
    //             color: 'teal'
    //             Layout.fillHeight: true
    //             Layout.minimumWidth: 50
    //             Layout.preferredWidth: 50
    //             Text {
    //                 anchors.centerIn: parent
    //                 text: parent.width + 'x' + parent.height
    //             }
    //         }
    ColumnLayout {
        Layout.fillHeight: true
        Layout.preferredWidth: 200
        Layout.alignment: Qt.AlignTop|Qt.AlignHCenter
        Layout.topMargin: 50
        Layout.leftMargin: 80
        Layout.rightMargin: 80
        spacing: 20
        Label {
            width: 60
            font.bold: true
            font.pixelSize: 22
            color: "#1589FF"
            text: qsTr("thisDivece")
        }
        RowLayout {

            ColumnLayout {
                Label {
                    width: 60
                    font.pixelSize: 15
                    color: "#B6B6B4"
                    text: qsTr("deviceCode")
                }
                RowLayout {
                    height: 36
                    TextInput {
                        id: mytoxidedit
                        selectByMouse: true
                        readOnly: true
                        font.bold: true
                        font.pixelSize: 24
                        text: mainWndModel.myid
                        //textcolor:"#FF9B9B9B"
                        inputMask: "000 000 000"
                    }
                    MyControls.Button {
                        id: coypbtn
                        hoverEnabled: true
                        width: 25
                        height: 25
                        normalimage: "qrc:/images/copy_normal.png"
                        hotimage: "qrc:/images/copy_hover.png"
                        pushedimage: "qrc:/images/copy_down.png"
                        ToolTip {
                            id: coypbtnToolTip
                            text: qsTr("copyId")
                            visible: coypbtn.hovered
                            contentItem: Text {
                                text: coypbtnToolTip.text
                                font: coypbtnToolTip.font
                                color: "#21be2b"
                            }
                            background: Rectangle {
                                border.color: "#DCDCDC"
                                radius: 3
                            }
                        }
                    }
                }
            }

            Rectangle {
                Layout.leftMargin: 18
                Layout.rightMargin: 18
                color: '#B6B6B4'
                height: 60
                Layout.minimumWidth: 1
                Layout.preferredWidth: 1
            }
            ColumnLayout {
                Label {
                    width: 60
                    font.pixelSize: 15
                    color: "#B6B6B4"
                    text: qsTr("TempPassword")
                }
                RowLayout {
                    height: 35

                    TextInput {
                        id: mypwdedit
                        selectByMouse: true
                        readOnly: true
                        font.bold: true
                        font.pixelSize: 25
                        echoMode: TextInput.PasswordEchoOnEdit
                        text: "123456"
                        inputMask: "000 000"
                    }
                    MyControls.Button {
                        id: eidtshowbtn
                        hoverEnabled: true
                        width: 25
                        height: 25
                        visible: false
                        normalimage: "qrc:/images/show_normal.png"
                        hotimage: "qrc:/images/show_hover.png"
                        pushedimage: "qrc:/images/show_down.png"
                        onClicked: {
                            eidtshowbtn.visible = false
                            eidthidebtn.visible = true
                            mypwdedit.echoMode = TextInput.PasswordEchoOnEdit
                        }
                        ToolTip {
                            id: showpwdToolTip
                            text: qsTr("hide pwd")
                            visible: eidtshowbtn.hovered
                            contentItem: Text {
                                text: showpwdToolTip.text
                                font: showpwdToolTip.font
                                color: "#21be2b"
                            }

                            background: Rectangle {
                                border.color: "#DCDCDC"
                                radius: 3
                            }
                        }
                    }
                    MyControls.Button {
                        id: eidthidebtn
                        hoverEnabled: true
                        width: 25
                        height: 25
                        normalimage: "qrc:/images/hide_normal.png"
                        hotimage: "qrc:/images/hide_hover.png"
                        pushedimage: "qrc:/images/hide_down.png"
                        onClicked: {
                            eidtshowbtn.visible = true
                            eidthidebtn.visible = false
                            mypwdedit.echoMode = TextInput.Normal
                        }
                        ToolTip {
                            id: hidepwdToolTip
                            text: qsTr("show pwd")
                            visible: eidthidebtn.hovered
                            contentItem: Text {
                                text: hidepwdToolTip.text
                                font: hidepwdToolTip.font
                                color: "#21be2b"
                            }
                            background: Rectangle {
                                border.color: "#DCDCDC"
                                radius: 3
                            }
                        }
                    }
                    MyControls.Button {
                        id: eidtpwdbtn
                        width: 25
                        height: 25
                        normalimage: "qrc:/images/edit_normal.png"
                        hotimage: "qrc:/images/edit_hover.png"
                        pushedimage: "qrc:/images/edit_down.png"
                        onClicked: menu.open()

                        Menu {
                            id: menu
                            y: eidtpwdbtn.height
                            height: 60
                            width: 100
                            background: Rectangle {
                                color: "#00000000"
                                radius: 5
                                border.color: "#DCDCDC"
                            }
                            MenuItem {
                                text: qsTr("change pwd")
                            }
                            MenuItem {
                                text: qsTr("custom pwd")
                            }
                        }
                    }
                }
            }
        }

        Label {
            width: 60
            font.bold: true
            font.pixelSize: 22
            color: "#1589FF"
            text: qsTr("remoteDevice")
        }
        TextField {
            id: totoxidedit
            selectByMouse: true
            font.bold: true
            font.pixelSize: 24
            Layout.fillWidth: parent
            //validator: IntValidator{bottom: 100000000; top: 2100000000;}
            //placeholderText: qsTr("Enter remote ID")
            background: Rectangle {
                color: "#00000000"
                radius: 4
                border.color: totoxidedit.focus ? "#1E90FF" : "#DCDCDC"
            }
            //inputMask: "000 000 000"
        }

        MyControls.Button {
            id: connectbtn
            //anchors.horizontalCenter: totoxidedit.horizontalCenter
            Layout.alignment:Qt.AlignHCenter
            text: qsTr("connect")
            width: 120
            height: 34
            rightInset: 15
            font.pixelSize: 15
            normalimage: "qrc:/images/softmgr_button_normal.png"
            hotimage: "qrc:/images/softmgr_button_hover.png"
            pushedimage: "qrc:/images/softmgr_button_down.png"
            onClicked: {
                console.info("qml connect")
                mainWndModel.startCon(totoxidedit.text)
            }
            Connections {
                //建立一个到NOTIFY接口的连接
                target: mainWndModel

                function onAvStatusChanged() {
                    //对应NOTIFY接口
                    var component = Qt.createComponent("qrc:/toxmainwnd.qml")
                    var window = component.createObject(null, {
                                                            "fid": mainWndModel.fid
                                                        })
                    window.fid = mainWndModel.fid
                    window.showNormal()
                }
            }
        }

        Label {
            topInset: 15
            id: constatuslabel
            text: mainWndModel.constatus === 1 ? qsTr("conServer") : qsTr(
                                                     "disconServer")
        }
    }

}
